<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>携程旅行</title>
  <!-- 引入normalize样式 -->
  <link rel="stylesheet" href="styles/normalize.css">
  <!-- 引入index样式 -->
  <link rel="stylesheet" href="styles/index.css">
  <!-- 引入fonts字体图标样式 -->
  <link rel="stylesheet" href="fonts/iconfont.css">
</head>

<body>
  <!-- 顶部搜索框 -->
  <div class="search_index">
    <div class="search_box">
      <i class="iconfont icon-chaxun"></i>
      <span>搜索:目的地/酒店/景点/航班号</span>
    </div>
  </div>
  <!-- 导航栏 -->
  <div class="nav_wrap">
    <ul class="nav_list">
      <li class="nav_item nav_hotel">
        <a href="#">
          <span class="nav_icon_jiudian"></span>
          <span>酒店</span>
        </a>
      </li>
      <li class="nav_item nav_hotel">
        <a href="#">
          <span class="nav_icon_minsu"></span>
          <span>民宿/客栈</span>
        </a>
      </li>
      <li class="nav_item nav_hotel">
        <a href="#">
          <span class="nav_icon_baokuan"></span>
          <span>特价/爆款</span>
        </a>
      </li>
    </ul>
    <ul class="nav_list">
      <li class="nav_item nav_hotel">
        <a href="#">
          <span class="nav_icon_jiudian"></span>
          <span>酒店</span>
        </a>
      </li>
      <li class="nav_item nav_hotel">
        <a href="#">
          <span class="nav_icon_minsu"></span>
          <span>民宿/客栈</span>
        </a>
      </li>
      <li class="nav_item nav_hotel">
        <a href="#">
          <span class="nav_icon_baokuan"></span>
          <span>特价/爆款</span>
        </a>
      </li>
    </ul>
    <ul class="nav_list">
      <li class="nav_item nav_hotel">
        <a href="#">
          <span class="nav_icon_jiudian"></span>
          <span>酒店</span>
        </a>
      </li>
      <li class="nav_item nav_hotel">
        <a href="#">
          <span class="nav_icon_minsu"></span>
          <span>民宿/客栈</span>
        </a>
      </li>
      <li class="nav_item nav_hotel">
        <a href="#">
          <span class="nav_icon_baokuan"></span>
          <span>特价/爆款</span>
        </a>
      </li>
    </ul>
    <ul class="nav_list">
      <li class="nav_item nav_hotel">
        <a href="#">
          <span class="nav_icon_jiudian"></span>
          <span>酒店</span>
        </a>
      </li>
      <li class="nav_item nav_hotel">
        <a href="#">
          <span class="nav_icon_minsu"></span>
          <span>民宿/客栈</span>
        </a>
      </li>
      <li class="nav_item nav_hotel">
        <a href="#">
          <span class="nav_icon_baokuan"></span>
          <span>特价/爆款</span>
        </a>
      </li>
    </ul>
    <ul class="nav_list">
      <li class="nav_item nav_hotel">
        <a href="#">
          <span class="nav_icon_jiudian"></span>
          <span>酒店</span>
        </a>
      </li>
      <li class="nav_item nav_hotel">
        <a href="#">
          <span class="nav_icon_minsu"></span>
          <span>民宿/客栈</span>
        </a>
      </li>
      <li class="nav_item nav_hotel">
        <a href="#">
          <span class="nav_icon_baokuan"></span>
          <span>特价/爆款</span>
        </a>
      </li>
    </ul>
  </div>
  <!-- 导航栏开关 -->
  <div class="nav_switch_wrap">
    <span class="nav_switch_item nav_switch_item_active"></span>
    <span class="nav_switch_item"></span>
  </div>
  <!-- 广告栏banner -->
  <div class="sub_banner">
    <div class="banner">
      <a href="#" class="block_header">
        <img src="images/hot-sale.png" alt="" class="title">
        <div class="slogan_hotsale">特价好货销售中！</div>
      </a>
      <div class="slider">
        <a href="#">
          <div class="block_img">
            <div class="tag">门票</div>
            <img src="uploads/trip.jpg" alt="">
          </div>
          <div class="block_footer">
            <div class="price_wrap">
              <i class="symbol">￥</i>
              218
            </div>
          </div>
        </a>
      </div>
      <div class="switch_wrapper">
        <span class="switch_item switch_item_active"></span>
        <span class="switch_item"></span>
        <span class="switch_item"></span>
      </div>
    </div>
    <div class="banner">
      <a href="#" class="block_header">
        <img src="images/hot-sale2.png" alt="" class="title">
        <div class="slogan_rank">权威排行榜</div>
      </a>
      <div class="rank_wrapper">
        <a href="#" class="rank_item">
          <div class="block_img">
            <img src="uploads/trip2.jpg" alt="">
            <div class="tag">华东</div>
          </div>
          <div class="block_footer">
            <div class="rank_title">华东设计师酒店榜</div>
          </div>
        </a>
        <a href="#" class="rank_item">
          <div class="block_img">
            <img src="uploads/trip3.jpg" alt="">
            <div class="tag">华东</div>
          </div>
          <div class="block_footer">
            <div class="rank_title">华东赏秋经典榜</div>
          </div>
        </a>
      </div>
    </div>
  </div>
  <!-- 轮播广告栏ad_banner_wrap -->
  <div class="ad_banner_wrap">
    <div class="img_wrap">
      <img src="uploads/ad_banner.jpg" alt="">
    </div>
  </div>
  <!-- 尾页toolbox -->
  <footer class="toolbox">
    <div class="tool_group">
      <a href="#" class="tool_link">电话预定</a>
      <a href="#" class="tool_link">下载携程</a>
      <a href="#" class="tool_link">Languague</a>
    </div>
    <div class="tool_ver">
      <a href="#" class="sitemap">网站地图</a>
      <a href="#" class="computer">电脑版</a>
      <p>
        ©
        2021携程旅行
        <span class="link_icp">沪ICP备08023580号</span>
      </p>
    </div>
  </footer>
  <!-- 底部导航栏tabbar -->
  <div class="tabbar">
    <a href="" class="tabbar_link">
      <span class="icon_home"></span>
      <span>首页</span>
    </a>
    <a href="" class="tabbar_link">
      <span class="icon_community"></span>
      <span>社区</span>
    </a>
    <a href="" class="tabbar_link">
      <span class="icon_message"></span>
      <span>消息</span>
    </a>
    <a href="" class="tabbar_link">
      <span class="icon_myCtrip"></span>
      <span>我的</span>
    </a>
  </div>
  </div>
</body>

</html>
